<!-- Main Column -->
<div id="maincolumn">
<h2 class="main cpwd" id="main-title">New Category</h2>
<!-- Visual help : help tips and "Connected" label -->
  <!-- Create Poll address -->
	  <?=form_open(admin_url().'pr_category_cl/page_insert_category', array('name' => 'newProduct','id' => 'newProduct'))?>
              <dl class="small"><!-- ODF Name -->
                  <dt>
                      <label>Category Name</label>                                    
                  </dt>
                  <dd>
                      <?=form_input(array('name' 		=> 'pd_name',
                                          'id' 			=> 'pd_name',
                                          'class' 		=> 'inputtext w180 title'		 
                                          ))?>
                        
                  </dd>
              </dl>
              <dl class="small"><!-- ODF GPS Latitude -->
                <dt>
                    <label>Description</label>                                    
                </dt>
                <dd>
                   <?=form_input(array('name' 		=> 'pd_des',
                                      'id' 			=> 'pd_des',
                                      'class' 		=> 'inputtext w180'
                                      ))?>
                    
                </dd>
              </dl>
              
             <dl class="small"><!-- ODF GPS Latitude -->
                <dt>
                    <label>Image</label>                                    
                </dt>
                <dd>
                   <?=form_input(array('name' 		=> 'pd_image',
                                      'id' 			=> 'pd_image',
                                      'class' 		=> 'inputtext w180'
                                      ))?>
                    
                </dd>
          	 </dl>
          <!-- block image -->
          	<!--<div style="float:left; width:28%">                
                  <dl class="small" style="margin-left:5px;">
                      <div id="view_picture" style="border:#CCC 1px solid; height:115px; padding:2px; width:115px; text-align:center;"></div>
                  </dl>
                  <dl class="small">
                      <button onclick="getFile();" id="upload" type="button" class="button left" style="margin-left: 5px; margin-right: 21px;">Upload</button>
                      <button type="button" class="button no left delete_file" style="margin-right:20px">Delete</button>
                      
                      <input id="userfile" name="userfile"  type="file" style="display:none;" />
                      <input type="hidden" name="picture" id="picture"/>
                      <label style="float:left;" id="file_name">Pleas upload Category picture!</label>
                  </dl>
  			</div>-->
          <!--end block image -->
            <!--button save and cancel -->
            <div class="buttons">	
                <input id="bSave1" type="button" class="button yes right mr40" value="<?= lang('pr_button_save') ?>" style="height:30px;width:50px;"/>
          		<input id="bCancel1" type="button" class="button no right" value=" <?= lang('pr_button_cancel') ?>" style="height:30px;width:50px;"/>      	
            </div>
      <?=form_close()?>
</div> <!-- /maincolumn -->

<script type="application/javascript">
	/**
	 * Panel toolbox
	 *
	 */
	//ION.initToolbox('empty_toolbox');
	
	/**
	 * Calendars init
	 *
	 */
	ION.initDatepicker();
	
	// submit for creating IODF
	//ION.setFormSubmit('newIODF', 'iodf_Save', 'isp_ipinfo_odf/page_insert_iodf');
	
	// Auto-generate Main title
	$$('.title').each(function(input, idx)
	{
		input.addEvent('keyup', function(e)
		{
			$$('.mtitle').set('text', this.value);
		});
	});
	
	/**
	 * Load window brows file
	 */
	function getFile(){
		 document.getElementById("userfile").click();
	}
	
	/**
	 * Upload file 
	 */
	(function () {
		var input = document.getElementById("userfile"), 
			formdata = false;
	
		if (window.FormData) {
			formdata = new FormData();
		}
		
		input.addEventListener("change", function (evt) {
			document.getElementById("file_name").innerHTML = "Uploading . . ."
			var i = 0, len = this.files.length, img, reader, file;
		
			for ( ; i < len; i++ ) {
				file = this.files[i];
		
					if ( window.FileReader ) {
						reader = new FileReader();
						reader.onloadend = function (e) { 
							showUploadedItem(e.target.result, file.fileName);
						};
						reader.readAsDataURL(file);
					}
					if (formdata) {
						formdata.append("userfile", file);
					}
			}
		
			if (formdata) {
				jQuery.ajax({
					url: admin_url + "pr_category_cl/upload_file",
					type: "POST",
					data: formdata,
					processData: false,
					contentType: false,
					success: function (res) {
						document.getElementById("view_picture").innerHTML = '<img width="115px" height="115px" src="<?= base_url().'files/pictures/' ?>'+res+'" />';
						document.getElementById("file_name").innerHTML = res; 
						document.getElementById("picture").value = res; 
						
						formdata = new FormData();//clear the old file that remember
					}
				});
			}
		}, false);
	}());
	
	/**
	 * Clean attach file 
	 */
	$$('.delete_file').each(function(item)
	{
		item.addEvent('click', function(e)
		{
			ION.confirmation(
				'1',
				function()
				{
					new Request.HTML({
						url: admin_url + 'pr_category_cl/delete_file',
						method: 'post',
						loadMethod: 'xhr',
						data: $('newProduct')
					}).send();
					
					document.getElementById("view_picture").innerHTML = "Picture deleted from server";
					document.getElementById("file_name").innerHTML = "Pleas upload Category picture!"; 
					document.getElementById("picture").value = ""; 
					document.getElementById("userfile").value = "";
				},
				'Are you sure?'
			);
		});
	});
	
	//- get_dist_by_pro
	$('iodf_poll_id').addEvent('change', function(e)
	{
		var count = 0;
		var pre = this.value;
		document.getElementById("iodf_name").value = pre+'_'+count++; 
	});
	

</script>

